<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <title>Oxus Platform</title>
        <link rel="icon" type="image/x-icon"  href="/static/images/favicon.ico" />
        <link rel="stylesheet" href="/static/css/semantic.css">
        <style type="text/css">
            body {
                background-color: #fcf7f7;
            }
            body > .grid {
                height: 100%;
            }
            .image {
                margin-top: -100px;
            }
            .column {
                max-width: 450px;
            }
        </style>
    </head>
    <body>
        <div class="ui segment">
            <div class="ui center aligned container">
                <div class="ui horizontal list">
                    <div class="item">
                        <img id='logo' class="ui circular image animating transition jiggle" style="animation-duration: 1200ms;" src="/static/images/neo_bigger.png" >
                        <!--
                        <img id='logo' class="ui image" src="/static/images/neo_bigger.png">
                        <input type="button" name="" value="默认" onclick="F1();">
                        <input type="button" name="" value="动起来" onclick="F2();">
                        -->
                        <div class="content">
                            <h1 class="ui header">Oxus Platform</h1>
                        </div>
                        <i class="github icon right aligned"></i>
                    </div>
                </div>
            </div>

        </div>
        <h1 class="ui teal header center aligned">Continuous Integreation & Best DevOps Practice</h1>
        <br>
        <div class="ui segment">
            <br><br>
            <div class="ui middle aligned center aligned grid">
                <div class="column">
                    <div class="ui form">
                        <div class="field">
                            <!--<label>Username</label>-->
                            <div class="ui left icon input">
                                <input type="text" placeholder="Username">
                                <i class="user icon"></i>
                            </div>
                        </div>
                        <div class="field">
                            <!--<label>Password</label>-->
                            <div class="ui left icon input">
                                <input type="password" placeholder="Password">
                                <i class="lock icon"></i>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui fluid large blue labeled icon button">
                                <i class="sign in icon"></i>
                                Login
                            </div>

                        </div>
                        <!--<div class="ui blue submit button">Login</div>-->
                        <div class="ui fluid large green labeled icon button">
                            <i class="signup icon"></i>
                            Sign Up
                        </div>
                    </div>
                </div>

            </div>
            <br><br>
        </div>

        <div class="ui vertical footer segment" style='border-bottom:0px'>
            <div class="ui center aligned container">
                <div class="ui inverted grid">
                    <div class="three wide column">
                        <h4 class="ui header">服务列表</h4>
                        <div class="ui link list">
                            <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">列表1</a>
                            <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">列表2</a>
                            <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">列表3</a>
                            <a class="item" href="/cla.html" target="_blank">列表4</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui header">系统列表</h4>
                        <div class="ui link list">
                            <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">列表1</a>
                            <a class="item" href="http://forums.semantic-ui.com" target="_blank">列表2</a>
                            <a class="item" href="http://1.semantic-ui.com">列表3</a>
                            <a class="item" href="http://legacy.semantic-ui.com">列表4</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui header">DevOps</h4>
                        <div class="ui link list">
                            <a class="item" class="disabled item">知识1</a>
                            <a class="item" class="disabled item">知识2</a>
                            <a class="item" class="disabled item">知识3</a>
                            <a class="item" class="disabled item">知识4</a>
                        </div>
                    </div>
                    <div class="seven wide right floated column">
                        <h4 class="ui teal header">Help Preserve This Project</h4>
                        <p class="font-family:font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;"> 欢迎大家在这里提出宝贵的建议，我们会做的更好</p>
                        <form action="https://github.com/joneyhsiao/Oxus" method="" target="_blank">
                            <input type="hidden" name="cmd" value="_s-xclick">
                            <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
                            <button type="submit" class="ui large teal button">Contribute on GitHub</button>
                        </form>
                    </div>
                </div>
                <div class="ui section divider"></div>
            </div>
            <!--
            <div class="ui center aligned container">
                <div class="ui horizontal list">
                    <div class="item">
                        <div class="content">
                            © 2017 Oxus
                        </div>
                    </div>
                </div>
            </div>
        -->
        </div>
        <div class="ui center aligned container">
            <div class="ui horizontal list">
                <div class="item">
                    <div class="content">
                        © 2017 Oxus
                    </div>
                </div>
            </div>
        </div>
        <!--<script src='css/semantic.js'></script>-->
        <script src='/static/js/jquery-3.2.0.js'></script>
        <script type="text/javascript">
            /*
            $(function(){
                $('#logo').attr('class', 'circular animating transition jiggle')
                //$('#logo').click(function(){
                //    $('#logo').toggleClass('circular animating transition jiggle');
                //})
            });
            function F1(){
                $("img[id='logo']").attr('class', 'ui image');
            }
            function F2(){
                var id1 = document.getElementById('logo');
                id1.className = 'ui circular image animating transition jiggle';
            }
            */
        </script>
    </body>
</html>
